import React, { Component } from 'react';
// 引入状态
import {countReduxStore as store} from '../../../redux/store'
class count extends Component {
   state={
   
    }
    // 组件挂载时调用
    componentDidMount(){
      // 当Redux状态变化时，强制更新rendar,让页面进行渲染
      store.subscribe(() => {
        this.setState({})
      })
     
    }
    // 加法
    add1=() => {
      const {value}=this.select
    
     store.dispatch({type:'add1',data:value*1})
      console.log(store);
    }
    add2=() => {
       const {value}=this.select
      //console.log(typeof value)//string
      store.dispatch({type:'add2',data:value*1})
    }
    add3=() => {
       const {value}=this.select
      //console.log(typeof value)//string
      const count=store.getState() 
      //string+number=string 所以要把string转number 
      if(count%2!==0) {
         store.dispatch({type:'add1',data:value*1})
     }else{
        alert('不符合奇数要求')
      }
    }
    add4=() => {
       const {value}=this.select
      //console.log(typeof value)//string
    
      //string+number=string 所以要把string转number 
      setInterval(()=>{
       store.dispatch({type:'add1',data:value*1})
      },2000) 
     
    }
  render() {
   
    return (
      <div>
        {/* 获取状态 */}
        <h4>{store.getState()}</h4>
        <select ref={(c)=>{this.select=c}}>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
        </select>&nbsp;
        <button onClick={this.add1}>+</button>&nbsp;
        <button onClick={this.add2}>-</button>&nbsp;
        <button onClick={this.add3}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.add4}>异步加</button>
      </div>
    );
  }
}
 
export default count;